<template>
  <div>
    app根组件
    <!--图书列表组件-->
    <booklist :list="list">
      <template #biaodan="item">
        <!-- {{ item }} -->
        <button @click="add">添加</button>
        <button @click="edit(item.item.id)">编辑</button>
        <button @click="del(item.item.id)">删除</button>
      </template>
    </booklist>
    <!--添加&编辑对话框-->
    <addbook :flag="flag" :title="title">
      <template>
        <form>
          作者:<input type="text" v-model="bookobj.author" /> 书名
          <input type="text" v-model="bookobj.bookname" /> 出版社
          <input type="text" v-model="bookobj.publisher" />
          <div>
            <button @click="quxiao">取消</button>
            <button @click="quren">确认</button>
          </div>
        </form>
      </template>
    </addbook>
  </div>
</template>
<script>
import booklist from './book/booklist.vue'
import addbook from './book/addbook.vue'
import axios from 'axios'
export default {
  name: '',
  components: { booklist, addbook },
  data () {
    return {
      creator: '德玛',
      list: [],
      title: '添加页面',
      flag: false,
      bookobj: { author: '', bookname: '', publisher: '' },
      editid: ''

    }
  },
  created () {
    this.send()
  },
  computed: {
  },
  methods: {
    //获取图书列表
    send () {
      axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
          creator: this.creator
        }
      }).then(res => {
        console.log(res.data.data);
        this.list = res.data.data
      })
    },
    //点击添加图书
    add () {
      this.title = '添加页面'
      this.flag = true
      this.bookobj.author = ''
      this.bookobj.bookname = ''
      this.bookobj.publisher = ''
    },
    //取消按钮
    quxiao () {
      this.flag = false
    },
    //确认按钮
    quren () {
      if (this.title === '添加页面') {
        if (this.bookobj.author === '' || this.bookobj.bookname === '' || this.bookobj.publisher === '') {
          return alert('请输入内容')
        } else {
          axios({
            url: 'http://hmajax.itheima.net/api/books',
            method: 'post',
            data: {
              creator: this.creator,
              ...this.bookobj
            }
          }).then(res => {
            // console.log(res);
            this.flag = false
            this.send()
          })
        }
      } else {
        // console.log(this.bookobj);
        // console.log(this.editid);
        if (this.bookobj.author === '' || this.bookobj.bookname === '' || this.bookobj.publisher === '') {
          return alert('请输入内容')
        }
        axios({
          url: 'http://hmajax.itheima.net/api/books/' + this.editid,
          method: 'put',
          data: {
            creator: this.creator,
            ...this.bookobj
          }
        }).then(res => {
          // console.log(res);
          this.send()
          this.flag = false
        })
      }


    },
    //点击删除
    del (id) {
      axios({
        url: 'http://hmajax.itheima.net/api/books/' + id,
        method: 'delete'
      }).then(res => {
        this.send()
      })
    },
    //点击编辑
    edit (id) {
      this.flag = true
      this.title = '编辑页面'
      console.log(id);
      let obj = this.list.find(item => item.id === id)
      this.editid = obj.id
      this.bookobj.author = obj.author
      this.bookobj.bookname = obj.bookname
      this.bookobj.publisher = obj.publisher
    }
  }


}
</script>
<style lang='less'  scoped>
</style>
